<template>
  <div class="container">
    <van-nav-bar
        left-text="取消"
        @click-left="onClickLeft"
        @click-right="onClickRight"
    >
      <template #right>
        <van-button size="small" round type="warning">发布</van-button>
      </template>
    </van-nav-bar>
    <div class="bodyContent">
    <textarea class="textContent" v-model="description" placeholder="填写有关商品的描述信息，让买家了解你的商品。">

    </textarea>
      <div class="uploadImage">
        <image-crop :uploadLoading="uploadLoading"
                    :imgUrl="ruleForm.whitePhoneUrl"
                    @before-upload="beforeRead"
                    @after-upload="cropUpload"></image-crop>
      </div>
      <div class="formContainer">
        <div class="title">
          <div class="name"> 选择分类:</div>
          <div class="content">
            <van-dropdown-menu>
              <van-dropdown-item v-model="classify" :options="classifyOption"/>
            </van-dropdown-menu>
          </div>
        </div>
        <div class="title">
          <div class="name">商品名称:</div>
        <div class="content">  <van-field v-model="title" placeholder="请输入商品名称"/></div>
        </div>
        <div class="title">
          <div class="name">商品价格:</div>
           <div class="content"> <van-field v-model="price" placeholder="请输入商品价格"/></div>
        </div>
        <div class="title">
          <div class="name"> 商品数量:</div>
          <div class="content">
            <van-stepper v-model="goods_num"/>
          </div>
        </div>
        <div class="title">
          <div class="name">是否上架:</div>
          <div class="content"><van-switch v-model="goods_state"/></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {Toast} from 'vant';
import imageCrop from "../components/utils/imgCropper";

export default {
  name: "PublishGoods",
  components: {
    imageCrop
  },
  data() {
    return {
      fileList: [],
      title: '',
      price:null,
      goods_img: '',
      goods_state: true,
      classify: 0,
      goods_num: 1,
      description: "",
      classifyOption: [
        {text: '电子产品', value: 0},
        {text: '化妆护肤', value: 1},
        {text: '二手书籍', value: 2},
        {text: '衣物服饰', value: 3},
        {text: '二手小件', value: 4},
        {text: '包包首饰', value: 5},
        {text: '玩具', value: 6}
      ],
      uploadLoading: false,
      ruleForm: {
        whitePhoneUrl: ''
      }

    }
  },
  methods: {
    onClickRight() {
      const data = {
        goods_classify: this.classify,
        goods_state: Number(this.goods_state),
        goods_img: this.goods_img,
        goods_num: this.goods_num,
        goods_price: Number(this.price),
        goods_description: this.description,
        goods_name: this.title
      }
      if (this.title == '') {
        Toast('请输入商品标题！');
      } else if (this.goods_img == '') {
        Toast('请上传至少一张图片！');
      } else if (this.description == '') {
        Toast('请输入商品描述！');
      } else {
        this.$http.post('/goods', data).then(res => {
          if (res.data.code === 0) {
            Toast.success('发布成功');
            setTimeout(() => {
              this.$router.push('/My')
            }, 2500)
          }
        })
      }


    },
    onClickLeft() {
      this.$router.push('/My')
    },
    beforeRead(file, callback) {
      const isImgType = file.type === "image/jpeg" || file.type === "image/png";
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isImgType) {
        this.$toast("上传图片只能是 JPG或PNG 格式!");
        callback(false);
        return false;
      }
      if (!isLt10M) {
        this.$toast("上传图片大小不能超过 10MB!");
        callback(false);
        return false;
      }
      callback(true);
      return true;
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let param = new FormData()
      param.append("file", file.file)
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }
      this.$http.post('/goods/uploadImage', param, config).then((res) => {
        if (res.status == 200) {
          file.status = "done";
          file.message = "上传完成";
          this.ruleForm.whitePhotoId = res.data;
        } else {
          file.status = "failed";
          file.message = "上传失败";
          this.$toast(res.data);
        }
      });
    },
    cropUpload(file) {

      this.uploadLoading = true;
      let param = new FormData()
      param.append("file", file.file)
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }

      this.$http.post('/goods/uploadImage', param, config).then((res) => {

        if (res.status == 200) {
          this.uploadLoading = false;
          this.ruleForm.whitePhotoId = res.data;
          this.goods_img = res.data.result.goods_img
        } else {
          this.uploadLoading = false;
          this.$toast(res.data);
        }
      });
    }

  }
}
</script>

<style scoped lang="less">
/deep/ .van-field__label {
  font-size: 20px;
}
/deep/.van-hairline--top-bottom::after{
  border: 0px solid #fff !important;
}

.container {
  .bodyContent {
    padding: 0 10px;
    .formContainer{
      margin: 0 10px;
      .title{
        display: flex;
        flex-direction: row;
        .name{
          width: 30%;
          height: 50px;
          line-height: 50px;
        }
        .content{
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
    .textContent {
      width: 100%;
      min-height: 100px;
      border: none;
      color: #777;
      font-weight: 600;

      .uploadImage {
        border: 1px solid #ccc;
      }

      .title {
        font-size: 20px !important;
      }

      .self {
        padding: 0 25px !important;
      }
    }
  }
}
</style>
